/**
 签字意见面板区域底部button
 */
import React from 'react';
import {inject, observer} from 'mobx-react';
import {Flex, Icon} from 'weaver-mobile';
import {getEmBottomBtns} from '../../util/formBtnUtil';

@inject('wfSignInputStore','wfOperateStore')
@observer
export class SignPanelBottom extends React.Component {

    render() {
        const { btnDisabled }=this.props.wfOperateStore;
        const bottomBtns = getEmBottomBtns();
        const SplitLine = () => {
            return <div className="wf-bottomOperate-split">
                <div className="wf-bottomOperate-split-line"></div>
            </div>
        }
        return (
            <Flex className='wf-bottomOperate-container' justify="center" align='center'>
                {bottomBtns && bottomBtns.map((item = {}, index) => {
                    const {key, name, action, flex = 4} = item;
                    return (
                        <Flex.Item key={index}
                                   className={`sign-bottom-item ${index < bottomBtns.length - 1 ? 'sign-bottom-right-border' : ''}`}
                                   style={{flex}} onClick={() => action()}>
                            {key === 'remark' ? <Icon type={'bianji'} size={'xs'}/> :
                                <span className={`item-showname${btnDisabled?" btn-disabled":""}`}>{name}</span>}
                        </Flex.Item>
                    )
                })
                }
            </Flex>
        )
    }
}

export default SignPanelBottom
